<template>
  <div class="global_bg">
    <van-sticky>
      <div class="top-box bg_white">
        <ul class="horizontal-list">
          <li v-for="(item, index) in tabs" :key="index">
            <div
              class="icon fts30 cbg"
              :class="{ active: activeTab === index }"
              @click="setActiveTab(index)"
            >
              <van-icon :name="item.icon" />
            </div>
            <div class="title tc">{{ item.title }}</div>
          </li>
        </ul>
      </div>
    </van-sticky>

    <div class="mt10 pd3">
      <DynamicView v-if="activeTab === 0"></DynamicView>
      <RecommendGoods v-if="activeTab === 1"></RecommendGoods>
      <FollowList v-if="activeTab === 2"></FollowList>
    </div>
    <div class="fixed" @click="goDynamic">+</div>
  </div>
</template>

<script>
import { ref } from 'vue' // 引入ref
import { Icon, Sticky, showToast } from 'vant'
import DynamicView from './DynamicInfo.vue'
import RecommendGoods from './RecommendGoods.vue'
import FollowList from './FollowList.vue'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL'
export default {
  components: {
    DynamicView,
    RecommendGoods,
    FollowList,
    [Icon.name]: Icon,
    [Sticky.name]: Sticky,
    [showToast.name]: showToast,
  },
  setup() {
    const activeTab = ref(0)
    // 定义tabs数组，包含按钮的信息
    const tabs = [
      { title: '动态', icon: 'comment' },
      { title: '推荐', icon: 'bag' },
      { title: '关注', icon: 'like' },
    ]
    const router = useRouter()
    // 切换选中的按钮
    const setActiveTab = (index) => {
      activeTab.value = index
    }

    //跳转发布动态
    const goDynamic = () => {
      const token = window.localStorage.getItem('token')
      if (!token) {
        // 如果本地存储中没有 token，则跳转到登录页面
        showToast('请先登录！')
        router.push({ path: routerURL.LOGIN })
      } else {
        // 如果存在 token，则跳转到发布动态页面
        router.push({ path: routerURL.RELEASE_DYNAMIC })
      }
    }

    return {
      activeTab, // 返回activeTab以便在模板中使用
      tabs,
      setActiveTab,
      goDynamic,
    }
  },
}
</script>

<style scoped>
.top-box {
  height: 100px;
  padding: 10px;
  margin: 0 10px;
  border-radius: 10px;
}
.horizontal-list {
  width: 100%;
  height: 100%;
  display: flex;
  list-style: none;
  padding: 0;
}

.horizontal-list li {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 0 25px;
}
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 7;
}
.title {
  flex: 3;
}
.active {
  color: #007aff; /* 修改选中按钮的颜色 */
}
.fixed {
  width: 60px;
  height: 60px;
  background-color: #76aa28;
  color: #fff;
  position: fixed;
  border-radius: 50%;
  right: 20px;
  bottom: 100px;
  z-index: 999;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
}
</style>
